<template>
  <div id="app">
    <div class="userorder-content" v-for="list in orderlist">
      <p>2017-05-12 15:30:10</p>
      <div class="orderbox">
        <div class="userbox">
          <img src="" >
        </div>
        <div class="usertext">
          <h3>用户名</h3>
          <h4>{{ list.text }}</h4>
        </div>
        <div class="usermoney">
          <h3>￥122</h3>
          <span>已付款</span>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
  export default {
    name: 'userorder',
    data: function () {
      return {
        orderlist: [
          { text: '海霸王天地会' },
          { text: '海霸王天地会' },
          { text: '海霸王天地会' }
        ]
      }
    }
  }
</script>

<style scoped>
  .userorder-content{
    padding: 0.75rem;
  }
  .userorder-content p{
    color:#999;
    margin-bottom:0.5rem;
    text-align: center;
  }
  .orderbox{
    padding:0.75rem;
    border:1px solid #ddd;
    border-radius:6px;
    display: flex;
    background: #fff;
  }
  .userbox{
    width:50px;
    height: 50px;
    border-radius:100%;
  }
  .userbox img{
    width:50px;
    height: 50px;
    border-radius:100%;
  }
  .usertext{
    margin-left: 0.75rem;
    width: 60%;
  }
  .usertext h3{
    margin-bottom:0.3rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .usertext h4{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .usermoney{
    text-align: right;
    width: 20%;
  }
  .usermoney h3{
    margin-bottom: 0.3rem;
    color:#333;
  }
  .usermoney span{
    font-size: 0.6rem;
    display: block;
    color:#3cb034;
  }
</style>